<template>
  <div class="common-layout">
    <el-container class="container">
      <el-header class="header">
        <div class="header_left">
          <el-menu
            class="el-menu-demo"
            mode="horizontal"
            :ellipsis="false"
            popper-effect="light"
            @select="handleSelect"
            menu-trigger="click"
          >
            <el-menu-item index="logo">
              <router-link to="/">
                <img
                  style="width: 100px"
                  src="./image/杨子济logo.png"
                  alt="杨子济Logo"
                />
              </router-link>
            </el-menu-item>
            <div class="flex-grow" />
            <router-link to="/guide">
              <el-menu-item index="guide">指南</el-menu-item>
            </router-link>
            <router-link to="/module">
              <el-menu-item index="module">组件</el-menu-item>
            </router-link>
            <router-link to="/resources">
              <el-menu-item index="resources"> 资源 </el-menu-item>
            </router-link>
            <el-sub-menu index="personalGuide">
              <template #title>个人指南</template>
              <router-link to="/profile">
                <el-menu-item index="profile">资料文档 </el-menu-item>
              </router-link>
              <router-link to="/studyNotes"
                ><el-menu-item index="studyNotes">
                  学习笔记
                </el-menu-item></router-link
              >
              <router-link to="/dataFile"
                ><el-menu-item index="dataFile"
                  >资料文件
                </el-menu-item></router-link
              >
            </el-sub-menu>
            <el-menu-item index="changeTheme">
              <el-switch
                v-model="toggleDark"
                :active-action-icon="Moon"
                :inactive-action-icon="Sunny"
                @click="themeIsDark()"
              />
            </el-menu-item>
            <el-menu-item index="translate">
              <img
                style="width: 27px; height: 27px"
                src="./image/翻译.png"
                alt="翻译Logo"
              />
            </el-menu-item>
            <el-menu-item index="gitee">
              <img
                style="width: 21px; height: 21px"
                src="./image/gitee.png"
                alt="Gitee Logo"
                @click="giteeClick"
              />
            </el-menu-item>
          </el-menu>
        </div>
        <!-- 右侧按钮 -->
        <div class="header_right"></div>
      </el-header>
      <el-container>
        <!-- <el-aside class="aside">Aside</el-aside> -->
        <el-main class="main">
          <router-view></router-view>
        </el-main>
      </el-container>
      <!-- <el-footer class="footer">Footer</el-footer> -->
    </el-container>
  </div>
</template>

<script lang="ts" setup>
import { ref } from "vue";
import { Sunny, Moon } from "@element-plus/icons-vue";
import { useDark, useToggle } from "@vueuse/core";

// 点击Gitee图标
const giteeClick = () => {
  alert("gitee");
};

// 选择下标
const handleSelect = (key: string, keyPath: string[]) => {
  console.log(key, keyPath);
};

// 黑暗主题
const toggleDark = ref<boolean>(false);
const isDark = useDark({
  storageKey: "useDarkKEY",
  valueDark: "dark",
  valueLight: "light",
});
const themeIsDark = useToggle(isDark);
</script>
<style scoped>
.el-switch {
  --el-switch-on-color: rgb(0, 0, 0);
}

.el-menu-item.is-active {
  background-color: #fff !important;
}

.common-layout {
  /* background-color: black; */
}

.container {
  /* padding: 8px; */
  height: 100vh;
}

/******  头部   ****/
.header_left img {
  width: 100px;
  height: 40px;
  margin: 10px;
}

.aside,
.main,
.footer {
  border: 1px solid rgb(220, 223, 230);
  margin: 1px;
}

.header {
  /* border-bottom: 1px solid rgb(220, 223, 230); */
  padding: 0;
}

.aside {
  width: 200px;
}

/**header菜单右对齐 */
.flex-grow {
  flex-grow: 1;
}
</style>
